<template>
    <div class="add-start">
        <el-main>
            <div class="detail-header">
                <p>添加启动页</p>
                <!-- <router-link to="/home/start-page" tag="div">返回</router-link> -->
            </div>
            <div class="detail-form">
                <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="100px">
                    <div class="form-left">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="detailForm.name"></el-input>
                        </el-form-item>

                        <el-form-item label="描述">
                            <el-input v-model="detailForm.description"></el-input>
                        </el-form-item>

                        <el-form-item label="播放时长" prop="playSeconds">
                            <el-select v-model="detailForm.playSeconds" placeholder="请选择播放时长">
                                <el-option label="1s" value="1"></el-option>
                                <el-option label="2s" value="2"></el-option>
                                <el-option label="3s" value="3"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="跳转链接">
                            <!-- 点击自定义，弹出输入框，拿到输入框的值作为select的值 -->
                            <!-- <el-select v-model="detailForm.url" placeholder="设置跳转链接" @change="custom(detailForm.url)">
                                <el-option value="无"></el-option>
                                <el-option value="自定义"></el-option>
                            </el-select> -->
                                
                            
                            <el-input v-model="detailForm.url" placeholder="设置跳转链接"></el-input>
                        </el-form-item>

                        <el-form-item label="上线时间" prop="startTime">
                            <el-date-picker
                                v-model="detailForm.startTime"
                                type="datetimerange"
                                range-separator="-"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="pickerOptions"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                            <!-- <span>{{ detailForm.startTime[0] }}</span> -->
                        </el-form-item>
                    
                        <el-form-item class="btnGrounp">
                            <el-button style="background: #4065E0; color: #fff " class="detail-btn" @click="defineSetting('detailForm')" :disabled="isUpload">确定</el-button>
                            
                            <el-link :underline="false" @click="cancelSetting">取消</el-link>
                            
                        </el-form-item>
                    </div>
                    <div class="form-right">
                        <!-- 考虑生产环境和开发环境 :class="{ isHide: hideUpload }"  :http-request="handUpload" :on-change="imgPreview" :on-remove="handleRemove"-->
                        <el-form-item prop="image" ref="imgValidate">
                            <!-- <el-upload
                                class="upload"
                                :show-file-list="false"
                                action="http://161.117.83.241:6060/comp/startup/upload"
                                list-type="picture-card"
                                name="uploadFile"
                                :http-request="handUpload"
                                :on-remove="handleRemove"
                                :auto-upload="true"
                                :limit="limitCount"
                                :on-change="imgPreview"
                                >
                                <video v-if="detailForm.image !='' && videoFlag == false" :src="detailForm.image" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
                                <i v-else-if="detailForm.image =='' && videoFlag == false">点这里上传</i>
                                <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top: 90px"></el-progress>
                            </el-upload> -->
                            <el-upload
                                class="upload"
                                :show-file-list="false"
                                :action="uploadUrl"
                                list-type="picture-card"
                                name="uploadFile"
                                :on-remove="handleRemove"
                                :on-success="handleVideoSuccess"
                                :limit="limitCount"
                                :on-progress="uploadVideoProcess"
                                >
                                <video v-if="detailForm.image !='' && videoFlag == false" :src="detailForm.image" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
                                <i v-else-if="detailForm.image =='' && videoFlag == false">点这里上传</i>
                                <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top: 90px"></el-progress>
                            </el-upload>
                            <p class="size"> 750px * 1920px </p>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </el-main>
    </div>
    
</template>

<script>
// import qs from 'qs'
import { addStartup, upload } from 'api/content/startupController.js'
export default {
    name: 'AddStartPage',
    data() {
        return {
            videoFlag: false,
            videoUploadPercent: 0,
            isUpload: true,
            uploadUrl: "http://161.117.83.241:6060/comp/startup/upload",
            detailForm: {
                name: '', // 名称
                description: '',  // 描述
                playSeconds: '',  // 播放时长
                url: '',  // 启动页链接
                startTime: [],  // 起始时间和结束时间
                image: ''  // 启动页图片地址
            },
            rules: {
                name: [
                    { required: true, message: "请输入启动页名称", trigger: 'blur' }
                ],
                playSeconds: [
                    { required: true, message: "请选择播放时长", trigger: 'blur' }
                ],
                startTime: [
                    { required: true, message: "请设置启用时间", trigger: 'blur' }
                ],
                image: [
                    { required: true, message: '请选择启动页图片', trigger: 'change' }
                ]
            },
            fileList: [],
            hideUpload: false,
            limitCount: 1,  // 上传图片限制为1
            pickerOptions: {
                disabledDate(time){
                    return time.getTime() < Date.now();
                }
            },
        }
    },
    
    created(){
        // console.log(parseInt(this.$route.query.moduleId))
    },
    methods: {
        handleRemove(file, fileList) {
            this.detailForm.image = ''  // 移除图片
            // this.hideUpload = fileList.length >= this.limitCount;
        },
        
        
        beforeUploadVideo(file) {
            const isLt10M = file.size / 1024 / 1024  < 10;
            if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            if (!isLt100M) {
                this.$message.error('上传视频大小不能超过100MB哦!');
                return false;
            }
        },
        handleVideoSuccess(res, file){
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            if(res.resultCode == 1){
                    this.detailForm.image = res.data.picUrl
                    this.$message.success(res.resultMsg)
                    this.isUpload = false
                }else{
                    this.$message.error(res.resultMsg)
                }
        },
        //进度条
        uploadVideoProcess(event, file, fileList) {
            this.videoFlag = true;
            this.videoUploadPercent = file.percentage.toFixed(0) * 1;
        },
        imgPreview(file,fileList){
            this.$refs.imgValidate.clearValidate()  // 清空图片项的验证
        },
        // 自定义上传图片
        handUpload(a){
            
            var file = a.file
            let fileDate = new FormData()
            fileDate.append('uploadFile',file)
            upload(fileDate).then(res => {
                // this.videoUploadPercent = 0
                console.log(a)
                if(res.resultCode == 1){
                    
                    this.detailForm.image = res.data.picUrl
                    this.$message.success(res.resultMsg)
                    this.isUpload = false
                }else{
                    this.$message.error(res.resultMsg)
                }
            })
            .catch(res => {
                this.$message.error('上传失败')
            })
        },
        
        cancelSetting(){
            this.$router.go(-1)
        },
        // handleVideoSuccess(file){
        //     // var file = a.file
        //     let fileDate = new FormData()
        //     fileDate.append('uploadFile',file)
        //     upload(fileDate).then(res => {
        //         // console.log(res)
        //         if(res.resultCode == 1){
        //             this.videoFlag = false;
        //             this.videoUploadPercent = 0;
        //             this.detailForm.image = res.data.picUrl
        //             this.$message.success(res.resultMsg)
        //             this.isUpload = false
        //         }else{
        //             this.$message.error(res.resultMsg)
        //         }
        //     })
        //     .catch(res => {
        //         this.$message.error('上传失败')
        //     })
        // },
        // 确定添加
        defineSetting(){
            // console.log(this.detailForm)
            var params = {
                name: this.detailForm.name,
                image: this.detailForm.image,
                description: this.detailForm.description,
                url: this.detailForm.url,
                playSeconds: parseInt(this.detailForm.playSeconds),
                appId: this.$route.query.appId,
                moduleId: parseInt(this.$route.query.moduleId),
                startTime: new Date(this.detailForm.startTime[0]).toISOString(),
                endTime: new Date(this.detailForm.startTime[1]).toISOString()
            }
            this.$refs.detailForm.validate( valid => {
                if(valid){
                    addStartup(params).then(res => {
                        console.log(res)
                        if(res.resultCode == 1){
                            this.$message.success(res.resultMsg)
                            this.$router.go(-1)
                        }else{
                            this.$message.error(res.resultMsg)
                        }
                    })
                }else{
                    console.log('error submit')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.add-start{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 20;
    .el-main{
        position: absolute;
         
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        .detail-header{
            display: flex;
            justify-content: space-between;
            margin-bottom: 22px;
            p{
                font-weight: bold;
            }
        }
        .detail-form{
            padding-top: 26px;
            .el-form{
                display: flex;
                .form-left{
                    flex: 2;
                    .btnGrounp{
                        margin-top: 80px;
                        margin-bottom: 0px;
                    }
                }
                .form-right{
                    flex: 1;
                }
            }
            .line{
                text-align: center;
            }
            .detail-btn{
                width: 150px;
                margin-right: 100px;
            }
            .avatar{
                // width: 100%;
                height: 100%;
            }
        }
    }
}

</style>

